scatter('../res/scatter.json', 1)

function scatter(path, params) {
    //$ajax()获取文件
    $.ajax({
        url: path,
        dataType: 'json',
        params: params
    }).then(function (scatteryData) {
        const data = scatteryData
        drawScatter(data)
    })
}


function drawScatter(datas) {
    var mytext = echarts.init(document.getElementById('scatter'));
    var hours = datas.data.days
    var days = ['CO', 'NO2', 'O3',
        'PM2_5', 'PM10'];
    var data = datas.data.data
    option = {
        tooltip: {
            position: 'right'
        },
        title: [],
        // 刷子
        dataZoom: [
            {

                singleAxisIndex: [0, 1, 2, 3, 4, 5],
                show: true,
                xAxisIndex: [0, 1, 2, 3, 4, 5],
                realtime: true,
                start: 1,
                end: 10,
                bottom: 20,
                height: 20,

            },
        ],
        singleAxis: [],
        series: []
    };

    days.forEach(function (day, idx) {
        // 坐标轴字体设置
        option.title.push({
            textBaseline: 'middle',
            top: (idx + 0.65) * 100 / 7 + '%',
            text: day,
            textStyle: {
                color: 'steelblue',
                fontSize: 10
            }
        });
        option.singleAxis.push({
            left: 40,
            type: 'category',
            // formatter: function () {
            //     var texts = hours
            //     return texts
            // },
            // boundaryGap: false,
            scale: true,
            // axisLine:{
            //     show:false,
            //     onZero:false
            // },
            splitLine: { show: false },
            data: hours,
            //新加的
            boundaryGap: true,
            axisLine: { onZero: false },
            axisTick: { show: true },
            splitLine: { show: true },
            axisLabel: { show: true },
            //splitNumber: 10,
            // min: '2018/1',
            // max: '2018/12',
            // show: true,新加的
            // 散点位置
            top: (idx * 100 / 7 + 8) + '%',
            height: (100 / 7 - 10) + '%',
            axisLabel: {
                // interval: 0,
                // rotate:-20,
                color: 'steelblue',
            }
        });
        option.series.push({
            singleAxisIndex: idx,
            coordinateSystem: 'singleAxis',
            type: 'scatter',
            xAxisIndex: [],
            data: [],
            symbolSize: function (dataItem) {
                return dataItem[1] * 0.8;
            },
        });
    });
    option.title.push({
        text: "污染物相关",
        textStyle:{
            color:'	#FFFFFF',
          }
    })
    data.forEach(function (dataItem) {
        option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
    });
    mytext.setOption(option);
}
